<template>
    <div class="record-item-root">
        <!--时间-->
        <p v-if="record.showTimeQ" class="time_text" style="margin-bottom: 30px">
            {{new Date(record.time).format('yyyy-MM-dd hh:mm:ss')}}
        </p>
        <!--普通文本-->
        <div v-if="record.type===0" class="normal_text_cls" :class="rootCls">
            <img class="image_cls" alt="" :src="record.icon"/>
            <div class="text_box">
                <p v-html="record.content" class="text_cls"></p>
            </div>
        </div>
        <!--系统消息-->
        <div v-if="record.type===1">
            <div class="system_text_box_cls">
                <p class="system_text_cls system_normal">{{keyword.l}}<span :class="keywordCls">{{keyword.m}}</span>{{keyword.r}}
                </p>
            </div>
        </div>
        <!--入职链接-->
        <div v-if="record.type===2" class="job_invitation_cls" :class="rootCls">
            <img class="image_cls" alt="" :src="record.icon"/>
            <div class="invitation_box_cls">
                <div style="display: flex;align-items: center;justify-content: center;height: 53px">
                    <p class="invitation_text">您已通过企业筛选，企业邀您入职</p>
                </div>
                <div class="invitation_button_box">
                    <el-button @click="acceptJob" style="width: 135px;background:rgba(64,150,103,1);color: white;">接受
                    </el-button>
                    <el-button @click="rejectJob" style="width: 135px;background:rgba(221,58,49,1);color: white">拒绝
                    </el-button>
                </div>
            </div>
        </div>
        <!--时间-->
        <div v-if="record.type===3" class="time_text_box_cls">
            <div style="width: 300px;height: 1px;background-color: #F7F7F7;"></div>
            <p class="time_text">
                {{record.time}}
            </p>
            <div style="width: 300px;height: 1px;background-color: #F7F7F7;"></div>
        </div>
        <!--职位人才-->
        <div v-if="record.type===4"
             class="talent_box_cls" :class="rootCls">
            <img class="image_cls" alt="" :src="record.icon"/>
            <div style="display: flex">
                <div style="width:200px;height:80px;background:rgba(247,247,247,1);border-radius:20px 0 0 20px;
                display: flex;align-items: center;justify-content: center">
                    <p style="font-size: 18px;">{{record.talent?record.talent.jobName:''}}</p>
                </div>
                <MsgTalentItem
                        :item="record.talent"
                        style="width:560px;height:80px;background:rgba(247,247,247,1);border-radius:0px 20px 20px 0px;"></MsgTalentItem>
            </div>
        </div>
        <!--职位-->
        <div v-if="record.type===5" style="width:100%;display: flex;align-items: center;" :class="rootCls">
            <img class="image_cls" alt="" :src="record.icon"/>
            <MsgJobItem :job="record.job"></MsgJobItem>
        </div>
        <!--打招呼信息-->
        <div v-if="record.type===6" class="normal_text_cls" :class="rootCls">
            <img class="image_cls" alt="" :src="record.icon"/>
            <div class="text_box">
                <p class="text_cls">您好，我对
                    <span style="color: #4AB0CF">{{record.hello?record.hello.company:''}}</span>
                    发布的
                    <span style="color: #4AB0CF">{{record.hello?record.hello.job:''}}</span>
                    很感兴趣
                </p>
            </div>
        </div>
    </div>
</template>

<script>
  import * as _ from 'underscore'
  import MsgTalentItem from './MsgTalentItem'
  import MsgJobItem from './MsgJobItem'

  export default {
    name: 'RecordItem',
    components: { MsgJobItem, MsgTalentItem },
    methods: {
      acceptJob() {
        if (this.record.type === 2) {
          //请求服务器数据接收该职位

        }
      },
      rejectJob() {
        if (this.record.type === 2) {
          //请求服务器数据拒绝该职位

        }
      }
    },
    props: {
      record: {
        type: Object,
        default() {
          return {
            showTimeQ: false,
            meQ: true,
            content: '你好',
            type: 0,
            jobId: 0
          }
        }
      }
    },
    data() {
      return {
        sysMsg: ['入职邀请已发送给对方', '人才已拒绝您的入职邀请', '已将对方简历标记为不合适', '人才已接收您的入职邀请']
      }
    },
    computed: {
      rootCls() {
        return {
          'l-r': !this.record.meQ,
          'r-l': this.record.meQ
        }
      },
      keywordCls() {
        return {
          'system_green': _.contains([this.sysMsg[0], this.sysMsg[4]], this.record.content),
          'system_red': _.contains([this.sysMsg[1], this.sysMsg[2]], this.record.content)
        }
      },
      keyword() {
        switch (this.record.content) {
          case this.sysMsg[0]:
            return {
              l: '',
              m: '入职邀请',
              r: '已发送给对方'
            }
          case this.sysMsg[1]:
            return {
              l: '人才已',
              m: '拒绝',
              r: '您的入职邀请'
            }
          case this.sysMsg[2]:
            return {
              l: '已将对方简历标记为',
              m: '不合适',
              r: ''
            }
          default:
            return {
              l: this.record.content,
              m: '',
              r: ''
            }
        }
      }
    }
  }
</script>

<style scoped>

    p {
        word-wrap: break-word;
        word-break: break-all;
    }

    button {
        border: none;
        border-radius: 0;
    }

    .invitation_button_box > button {
        margin: 0;
    }

    .record-item-root {
        width: 100%;
        height: fit-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 15px;
        padding-bottom: 15px;

        /*border: 1px solid blue;*/
    }

    .l-r {
        flex-direction: row;
    }

    .r-l {
        flex-direction: row-reverse;
    }

    .text_box {
        min-height: 33px;

        max-width: 500px;

        background: rgba(247, 247, 247, 1);
        border-radius: 10px;

        display: flex;
        align-items: center;
        justify-content: flex-start;

        /*border: 1px solid blue;*/

        padding: 10px 30px 10px 30px;
    }

    .text_cls {

        font-size: 14px;
        text-align: left;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);

        /*border: 1px solid green;*/

    }

    .image_cls {
        width: 24px;
        height: 24px;
        margin-left: 10px;
        margin-right: 10px;
        border-radius: 12px;
    }

    .normal_text_cls {
        width: 100%;
        min-height: 53px;
        display: flex;
        align-items: center;

        /*border: 1px solid red;*/
    }

    .system_text_box_cls {
        min-height: 33px;
        max-width: 500px;
        background: rgba(247, 247, 247, 1);
        border-radius: 17px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        padding: 10px 30px 10px 30px;

        /*border: black 1px solid;*/
    }

    .system_text_cls {
        font-size: 14px;
        font-family: MicrosoftYaHei;
        font-weight: 400;
    }

    .system_normal {
        color: rgba(51, 51, 51, 1);
    }

    .system_green {
        color: rgba(64, 150, 103, 1)
    }

    .system_red {
        color: rgba(221, 58, 49, 1)
    }

    .invitation_box_cls {

        width: 270px;
        height: 93px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.15);
        border-radius: 10px 10px 0px 0px;

        display: flex;
        flex-direction: column;
    }

    .invitation_button_box {
        display: flex;
        height: 40px;
        justify-content: space-around;
    }

    .job_invitation_cls {
        width: 100%;
        min-height: 53px;
        display: flex;
        align-items: center;
    }

    .invitation_text {
        font-size: 14px;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
    }

    .time_text_box_cls {

        display: flex;
        align-items: center;
        justify-content: space-around;

        min-height: 33px;
        width: 100%;
    }

    .time_text {
        font-size: 14px;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
    }

    .talent_box_cls {
        width: 100%;
        display: flex;
        align-items: center;
    }
</style>